import { styled } from "@linaria/react";
import { View, Image, Text } from "@tarojs/components";

import { callContainerPost, useCallContainerGet } from "@/tools/useCallContainer";
import Taro from "@tarojs/taro";  
import { useRouter } from "@tarojs/taro";
import VoteBar from "@/components/VoteBar";
import Comment from "./components/Comment";
import AddCommentBar from "./components/AddCommentBar";
import starSVG from "@/assets/star.svg"
import starFillSVG from "@/assets/star-fill.svg"

export default function Dish() {
  const { params } = useRouter();
  const [{ dish }, _, updateDishInfo] =
    useCallContainerGet(params.id && `/dishes/${params.id}`);
  const { name, picture_url, price, queuing_time, restaurant_name, vote, user_like, user_collect } = dish ?? {};
  const [{ commentsOnDishes }, isLoadingComments, updateComments] = 
    useCallContainerGet(params.id && `/dishes/${params.id}/dishescomments`);
  const [{ dishes_tag }] = useCallContainerGet(params.id && `/dishes/${params.id}/tags`);

  const summitVote = (opt) => {
    callContainerPost(`/dishes/${params.id}/users/_open_id/opt/${opt}`)
    .then(() => updateDishInfo());
  }

  const summitCollect = () => {
    callContainerPost(`/dishes/${params.id}/users/_open_id/collect`)
    .then(() => updateDishInfo());
  }

  const handleClick = (tag) => {
    console.log(tag);
    Taro.navigateTo({ url: `../searchDishes/index?sst=${tag}` });
  }

  return (
    <DishView>
      {!dish ? (
        <Text>Loading</Text>
      ) : (
        <>
          <DishImage src={picture_url} mode="aspectFill" />
          <DishInfo>
            <DishHeadBar>
              <DishName>{name}</DishName>
              { (dishes_tag ?? []).map((tag) => (
                <DishTag onClick={() => handleClick(tag)} >{tag}</DishTag>
              ))}
            </DishHeadBar>
            <DishWaitingTime>预估等待{queuing_time}分钟</DishWaitingTime>
            <DishRestaurant>{ restaurant_name }</DishRestaurant>
            <DishPrice>¥{price}</DishPrice>
            <DishVoteBarWrapper>
              <VoteBar vote={ vote } user_like={ user_like } summitVote={ summitVote } />
            </DishVoteBarWrapper>
            <StarButton src={user_collect ? starFillSVG : starSVG} onClick={() => summitCollect()}/>
          </DishInfo>
          <AddCommentBar dishes_id={params.id} updateComments={updateComments}/>
          <DishComments>
            {(commentsOnDishes ?? []).map((comment) => (
              <>
                <GrayBar />
                <Comment comment={ comment } />
              </>
            ))}
            <GrayBar />
            <NoMoreTip>{isLoadingComments ? '正在加载评论……' : '没有更多评论了'}</NoMoreTip>
          </DishComments>
        </>
      )}
    </DishView>
  );
}

const DishView = styled(View)`
  display: flex;
  flex-direction: column;
`;

const DishImage = styled(Image)`
  width: 100%;
  height: 350px;
`;

const DishInfo = styled(View)`
  position: relative;
  padding: 20px;

  flex-grow: 0;
  display: flex;
  flex-direction: column;
`;
const DishHeadBar = styled(View)`
  display: flex;
  align-items: center;
`;
const DishTag = styled(View)`
  padding: 5px 10px;
  height: fit-content;
  border-radius: 10px;
  background-color: #ff7837d1;
  color: white;
  font-size: 24px;
  margin-right: 10px;
`;
const DishName = styled(Text)`
  font-size: 40px;
  font-weight: bold;
  margin-right: 20px;
`;
const DishRestaurant = styled(Text)`
  font-size: 28px;
  color: gray;
`;
const DishWaitingTime = styled(Text)`
  margin-bottom: 10px;
  font-size: 24px;
`;
const DishPrice = styled(Text)`
  font-size: 32px;
  font-weight: bold;
  margin-top: 10px;
  color: #ff6a00;
`;

const DishVoteBarWrapper = styled(View)`
  position: absolute;
  right: 30px;
  bottom: 30px;
`;

const StarButton = styled(Image)`
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
`

const DishComments = styled(View)`
  flex-grow: 1;
`;

const GrayBar = styled(View)`
  height: 15px;
  background-color: #f3f3f3;
`;

const NoMoreTip = styled(View)`
  padding: 20px;
  width: 100%;

  font-size: 28px;
  color: gray;
  text-align: center;
`;
